<template>
  <div id="app">
    <img src="./assets/logo.png">
<p>导航:
  <router-link to="/">首页</router-link>&nbsp;|
  <router-link to="/lyy">Lyy</router-link>&nbsp;|
  <router-link to="/lyy/p1">lyy-p1</router-link>&nbsp;|
  <router-link to="/lyy/p2">yy-p2</router-link>
  <!--这里的 to 中的name 要和router/index.js  {path:'p2',name:"p2",  component:Lyyp2} 的name 对应-->
  <!--传参写法:<router-link :to:{name:xxx,params:{key:value}}></router-link>-->
  <router-link :to="{name:'p2',params:{username:'liyy',id:123,name:'zhang'}}">测试传参</router-link> |
  <router-link to="/params/1010/zhangsan">测试一下url传参</router-link> |
  <router-link to="goLyy">重定向到Lyy</router-link> |
  <router-link to="/goparams/123/goto">带参数重定向</router-link> |
  <router-link to="/gomyname">alias 别名</router-link> |
  <router-link to="/asdsa">404错误页面</router-link> |
</p>

  <p>{{$route.name}}</p>
<p>
<button @click="back">后退一页</button>
        <button @click="home">去首页</button>
        <button @click="go">前进一页</button>
</p>
    <transition name="fade" mode="out-in">
      <router-view/>
      </transition>
    <router-view name="left" style="float:left; width:20%;border: solid 1px red;min-height:500px"></router-view>
    <router-view name="right" style="float:left;width:78%;border: solid 1px blue;min-height:500px"></router-view>


  </div>
</template>

<script>
export default {
  name: "App",methods:{
      go:function(){
        this.$router.go(1);
      },
      back:function(){
        this.$router.go(-1);
      },
      home:function(){
        this.$router.push('/');
      }
    }
};
</script>
<!-- style 里添加 scoped 就是只对当前页面起作用-->
<style>
.fade-enter{
  opacity: 0;
}
.fade-leave{
  opacity: 1;
}
.fade-enter-active{
  transition: opacity 2.5s;
}
.fade-leave-leave{
  opacity: 0;
  transition: opacity 2.5s;
}


#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
